<template>
	<div style="padding-top: 2.67vw;" v-if="item">
		<div class="product-box" @tap="toDetail(item.info.spuId)">
			<image src="../../static/img/indexBorderTwo.png" mode="aspectFill" style="width: 91.47vw;height: 124vw;position: absolute;z-index: 7;border-radius: 6.4vw;" v-if="item.limitTime == null"></image>
				<image src="../../static/img/indexBorderTwo.png" mode="aspectFill" style="width: 91.47vw;height: 124vw;position: absolute;z-index: 7;border-radius: 6.4vw;" v-else-if="item.info.stock <= 0  || item.limitTime.info.status == 'done'"></image>
				
				<image src="../../static/img/indexBorderThree.png" mode="aspectFill" style="width: 91.47vw;height: 124vw;position: absolute;z-index: 7;border-radius: 6.4vw;" v-else-if="item.limitTime.info.status == 'ing' && item.info.stock != 0"></image>
				
			<image src="../../static/img/indexBorder.png" mode="aspectFill" style="width: 91.47vw;height: 124.6vw;position: absolute;z-index: 7;border-radius: 6.4vw;" v-else></image>
		
			<image :src="item.info.cover" mode="aspectFill" class="product-img"></image>
			
			<!-- <div v-if="item.info.stock <= 0  || item.limitTime.info.status == 'done' && item.limitTime.info.status == 'ing'" style="display: flex;z-index: 9;position: absolute;top: 6.4vw;left: 6.4vw;">
				<block v-if="item.holderCount">
					<image :src="item.holders[0].avatar" mode="aspectFill" class="image853" style="position: absolute;"></image>
					<image :src="item.holders[1].avatar" mode="aspectFill" class="image853" style="position: absolute;left: 6.4vw;"></image>
					<image :src="item.holders[2].avatar" mode="aspectFill" class="image853" style="position: absolute;left: 12.8vw;"></image>
					<image :src="item.holders[3].avatar" mode="aspectFill" class="image853" style="position: absolute;left: 19.2vw;"></image>
					<div class="image853 more-border">{{ item.holderCount }} <block v-if="item.holderCount > 99">+</block></div>
				</block>
			</div> -->
			<block v-if="item.limitTime != null">
				<block v-if="item.info.stock <= 0 || item.limitTime.info.status == 'done'">
					<span class="shouqin">已售罄</span>
				</block>
				<div style="position: absolute;right: 6.4vw;top: 3.47vw; z-index: 10;" v-else>
					<span style="display: flex;flex-direction: column;">
						<block v-if="item.limitTime.info.status == 'waiting'">
							<span style="font-size: 3.2vw;color: #aaaaaa;font-weight: 300;display: flex;align-items: center;justify-content: flex-end;">
								<image src="../../static/img/ready.png" mode="aspectFill" style="width: 4.27vw;height: 4.27vw;margin-right: 1.07vw;"></image> 
								即将开售
							</span>
							<u-count-down :timestamp="timestamp" bg-color="#1b1b1bd" color="#FFCE80" separator-color="#FFCE80" font-size="24" separator-size="24" separator="colon" :show-days="false"></u-count-down>
						</block>
						<block v-else-if="item.limitTime.info.status == 'ing' && item.info.stock != 0">
							<span style="font-size: 3.2vw;color: #A972FF;font-weight: 300;display: flex;align-items: center;justify-content: flex-end;">
								<image src="../../static/img/detailEnter.png" mode="heightFix" style="width: 4.27vw;height: 4.27vw;margin-right: 1.07vw;"></image>
								火热抢购中
							</span>
							<!-- <u-count-down :timestamp="timestamp" bg-color="#1b1b1bd" color="#FFCE80" separator-color="#FFCE80" font-size="24" separator-size="24" separator="colon" :show-days="false"></u-count-down> -->
						</block>
					</span>
				</div>
			</block>
			
			<div style="position: relative;z-index: 9;">
				<div class="product-text">
					<span class="xianliang-box">
						<image src="../../static/img/indexTitle.png" mode="aspectFill" class="xianliang-img"></image>
						<label class="xianliang-text">{{ item.info.nftMaxSupply }}份</label>
					</span>
					<span class="jiu-font32-fff" style="margin-top: 2.13vw;display: block;">{{ item.info.spuTitle }}</span>
					<block v-if="item.info.tags">
						<span class="label-border" v-for="item1 in item.info.tags.split(',')">{{ item1 }}</span>
					</block>
					<div class="productUser-info">
						<span class="info-left">
							<image :src="item.creator.avatar" mode="aspectFill" class="info-img"></image>
							<label class="jiu-font24-555">{{ item.creator.name }}</label>
						</span>
						<span class="info-right" v-if="item.info.type != 'synthetic'">
							<label style="font-size: 3.2vw;">￥</label>{{ item.info.spuPrice / 100 | moneyFilter }}
							<image src="../../static/img/enter16.png" mode="aspectFill" style="width: 4.27vw;height: 4.27vw;"></image>
						</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		props:{
			item: {
				type: Object,
				default: {}
			}
		},
		data(){
			return{
				timestamp: 0
			}
		},
		methods:{
			toDetail(id){
				if(this.item.drawLots){
					this.$ma.route.drawDetail({
						spuId: id
					})
				}else if(this.item.info.type == 'synthetic'){
					this.$ma.route.synthesisDetail({
						spuId: id
					})
				} else{
					this.$ma.route.detail({
						spuId: id
						// spuId: 503 0yuangou
						// spuId: 514 0.01商品
						// spuId: 517 //扭蛋
					})
				}
				
			}
		},
		async mounted() {
			if(!this.item) return;
			if(this.item.limitTime == null) return;
			if(this.item.limitTime.info.status == 'ing'){
				const nowTime = new Date().valueOf();
				const activeTime = new Date(this.item.limitTime.info.endTime.replace(/-/g,'/'));
				const time = activeTime - nowTime;
				this.timestamp = time / 1000;
			}else if(this.item.limitTime.info.status == 'waiting'){
				const nowTime = new Date().valueOf();
				const activeTime = new Date(this.item.limitTime.info.startTime.replace(/-/g,'/'));
				const time = activeTime - nowTime;
				this.timestamp = time / 1000;
			}
		}
	}
</script>

<style lang="scss">
	.more-border{
		position: absolute;
		left: 25.6vw;
		background-color: #1b1b1b;
		text-align: center;
		line-height: 8.53vw;
		font-size: 2.67vw;
		font-weight: 500;
		color: #aaaaaa;
	}
	.image853{
		width: 8.53vw;
		height: 8.53vw;
		border-radius: 50%;
		border: 1px solid #1b1b1b;
	}
	.xianliang-box{
		height: 4.27vw;
		display: flex;
		.xianliang-img{
			width: 10.67vw;
			height: 4.27vw;
			display: block;
		}
		.xianliang-text{
			font-size: 2.67vw;
			font-weight: 300;
			color: #FFCE80;
			background-color: #323232;
			padding: 0.27vw 1.07vw;
			border-radius: 0 1.07vw 1.07vw 0;
		}
	}
	.product-img {
		width: 87.21vw;
		height: 89.6vw;
		border-radius: 6.4vw;
		z-index: 6;
		// position: absolute;
		top: 2.13vw;
		left: 2.13vw;
	}
	.shouqin{
		width: 22.4vw;
		line-height: 8.53vw;
		background-color: #1b1b1b;
		border-radius: 4.27vw;
		color: #aaaaaa;
		font-weight: 300;
		font-size: 3.2vw;
		text-align: center;
		position: absolute;
		right: 6.4vw;
		top: 6.4vw
		; z-index: 10;
	}
	.product-box {
		// margin-top: 2.67vw;
		// padding: 2.13vw;
		padding-bottom: 4vw;
		background-color: #1b1b1b;
		border-radius: 6.4vw;
		position: relative;
	
		
	
		.product-text {
			padding: 4.27vw;
			padding-bottom: 0;
			z-index: 3;
		}
		
		.label-border{
			border: 1px solid #A972FF;
			padding: 0.27vw 1.07vw;
			font-size: 2.67vw;
			color: #A972FF;
			font-weight: 300;
			display: inline-flex;
			margin-top: 1.07vw;
			border-radius: 1.07vw;
			margin-right: 1.07vw;
		}
		
		.productUser-info {
			display: flex;
			justify-content: space-between;
			margin-top: 3.2vw;
	
			.info-left {
				display: flex;
				align-items: center;
	
				.info-img {
					width: 4.27vw;
					height: 4.27vw;
					border-radius: 50%;
					margin-right: 0.8vw;
				}
			}
			.info-right{
				color: #A972FF;
				font-size: 4.8vw;
				font-weight: 500;
				display: flex;
				align-items: center;
			}
		}
	}
</style>
